<template>
	<view class="edit-profile">
		<!-- 头像上传区域 -->
		<view class="avatar-section">
			<view class="avatar-wrap" @tap="chooseImage">
				<image class="avatar" :src="formData.avatar || '/static/avatars/default-avatar.jpg'" />
				<view class="edit-overlay">点击修改头像</view>
			</view>
		</view>

		<!-- 表单区域 -->
		<view class="form-section">
			<view class="form-item">
				<text class="label">昵称</text>
				<input type="text" v-model="formData.nickName" placeholder="请输入昵称" />
			</view>
			<view class="form-item">
				<text class="label">性别</text>
				<view class="radio-group">
					<radio-group @change="handleSexChange">
						<label class="radio-item">
							<radio value="0" :checked="formData.sex === '0'" color="#ff6b35" />
							<text>男</text>
						</label>
						<label class="radio-item">
							<radio value="1" :checked="formData.sex === '1'" color="#ff6b35" />
							<text>女</text>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="form-item">
				<text class="label">手机号</text>
				<input type="number" v-model="formData.phonenumber" placeholder="请输入手机号" maxlength="11" />
			</view>
			<view class="form-item">
				<text class="label">邮箱</text>
				<input type="text" v-model="formData.email" placeholder="请输入邮箱" />
			</view>
			<view class="form-item">
				<text class="label">个人简介</text>
				<textarea v-model="formData.remark" placeholder="请输入个人简介" />
			</view>
		</view>

		<!-- 保存按钮 -->
		<view class="bottom-btn">
			<button class="save-btn" @tap="handleSave">保存</button>
		</view>
	</view>
</template>

<script>
	import storage from '@/utils/storage'
	import {
		uploadAvatar,
		updateUserProfile
	} from '@/api/system/user.js'

	export default {
		data() {
			return {
				formData: {
					avatar: '',
					nickName: '',
					phonenumber: '',
					wechat: '',
					remark: '',
					email: '',
					sex: '0'
				}
			}
		},
		onLoad() {
			const storage_data = uni.getStorageSync('storage_data')
			if (storage_data && storage_data.vuex_user_info) {
				this.formData = {
					...storage_data.vuex_user_info
				}
			}
		},
		methods: {
			// 选择并上传头像
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0]
						uni.showLoading({
							title: '上传中...'
						})
						let data = {
							name: 'avatarfile',
							filePath: tempFilePath
						}
						// 上传头像
						uploadAvatar(data).then(res => {
							console.log('uploadAvatar', res)
							this.formData.avatar = res.data.imgUrl
							uni.hideLoading()
						})
					}
				})
			},

			// 保存资料
			handleSave() {
				// 表单验证
				if (!this.formData.nickName) {
					return uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					})
				}

				updateUserProfile(this.formData).then(res => {
					console.log('updateUserProfile', res)
					if (res.code === 200) {
						// 更新本地存储
						const storage_data = uni.getStorageSync('storage_data') || {}
						storage_data.vuex_user_info = {
							...this.formData
						}
						uni.setStorageSync('storage_data', storage_data)

						uni.showToast({
							title: '保存成功',
							success: () => {
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/mine/index'
									})
								}, 1500)
							}
						})
					} else {
						uni.showToast({
							title: '保存失败',
						})
					}
				})


			},

			handleSexChange(e) {
				this.formData.sex = e.detail.value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.edit-profile {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 30rpx;
	}

	.avatar-section {
		display: flex;
		justify-content: center;
		padding: 40rpx;
		margin-bottom: 20rpx;

		.avatar-wrap {
			position: relative;
			width: 220rpx;
			height: 220rpx;
			background-color: #fff;
			border-radius: 50%;
			overflow: hidden;

			.avatar {
				width: 220rpx;
				height: 220rpx;
			}

			.edit-overlay {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				background: rgba(0, 0, 0, 0.5);
				color: #fff;
				font-size: 18rpx;
				text-align: center;
				padding: 6rpx 0;
			}
		}
	}

	.form-section {
		background: #fff;
		border-radius: 16rpx;
		padding: 20rpx;

		.form-item {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #eee;

			&:last-child {
				border-bottom: none;
			}

			.label {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 16rpx;
				display: block;
			}

			input,
			textarea {
				width: 100%;
				font-size: 28rpx;
				color: #333;
			}

			textarea {
				height: 160rpx;
				line-height: 1.5;
			}

			.radio-group {
				radio-group {
					display: flex;
					gap: 40rpx;
				}

				.radio-item {
					display: flex;
					align-items: center;
					gap: 8rpx;

					text {
						font-size: 28rpx;
						color: #333;
					}
				}
			}
		}
	}

	.bottom-btn {
		margin-top: 60rpx;
		padding: 0 30rpx;

		.save-btn {
			background: #ff6b35;
			color: #fff;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 44rpx;
			font-size: 32rpx;
		}
	}
</style>